<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>云存储管理台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <link href="/css/admin.css" rel="stylesheet">
</head>
<body>
    <div id="app">
        <!-- 登录页面 -->
        <div id="login-page" class="login-container">
            <div class="login-form">
                <h2 class="text-center mb-4">云存储管理台</h2>
                <form id="login-form">
                    <div class="mb-3">
                        <label for="email" class="form-label">邮箱</label>
                        <input type="email" class="form-control" id="email" required>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">密码</label>
                        <input type="password" class="form-control" id="password" required>
                    </div>
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary">登录</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 管理台主界面 -->
        <div id="admin-dashboard" class="d-none">
            <!-- 导航栏 -->
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">云存储管理台</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav me-auto">
                            <li class="nav-item">
                                <a class="nav-link active" href="#" data-section="dashboard">
                                    <i class="bi bi-speedometer2"></i> 仪表盘
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#" data-section="users">
                                    <i class="bi bi-people"></i> 用户管理
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#" data-section="accounts">
                                    <i class="bi bi-cloud"></i> 云账号管理
                                </a>
                            </li>
                        </ul>
                        <ul class="navbar-nav">
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown">
                                    <i class="bi bi-person-circle"></i> <span id="current-user-name">用户</span>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#" id="profile-link">个人资料</a></li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li><a class="dropdown-item" href="#" id="logout-link">退出登录</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>

            <!-- 主内容区域 -->
            <div class="container-fluid mt-4">
                <!-- 仪表盘 -->
                <div id="dashboard-section" class="content-section">
                    <h2>仪表盘</h2>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">用户总数</h5>
                                    <p class="card-text display-4" id="total-users">-</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">云账号总数</h5>
                                    <p class="card-text display-4" id="total-accounts">-</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">存储使用量</h5>
                                    <p class="card-text display-4" id="storage-usage">-</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 用户管理 -->
                <div id="users-section" class="content-section d-none">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h2>用户管理</h2>
                        <button class="btn btn-primary" id="add-user-btn">
                            <i class="bi bi-plus-circle"></i> 添加用户
                        </button>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>邮箱</th>
                                    <th>昵称</th>
                                    <th>角色</th>
                                    <th>状态</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="users-table-body">
                                <!-- 用户数据将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 云账号管理 -->
                <div id="accounts-section" class="content-section d-none">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h2>云账号管理</h2>
                        <button class="btn btn-primary" id="add-account-btn">
                            <i class="bi bi-plus-circle"></i> 添加云账号
                        </button>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>名称</th>
                                    <th>提供商</th>
                                    <th>区域</th>
                                    <th>状态</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="accounts-table-body">
                                <!-- 云账号数据将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 模态框 -->
        <!-- 用户编辑模态框 -->
        <div class="modal fade" id="userModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="userModalTitle">用户信息</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form id="user-form">
                            <input type="hidden" id="user-id">
                            <div class="mb-3">
                                <label for="user-email" class="form-label">邮箱</label>
                                <input type="email" class="form-control" id="user-email" required>
                            </div>
                            <div class="mb-3">
                                <label for="user-password" class="form-label">密码</label>
                                <input type="password" class="form-control" id="user-password">
                                <div class="form-text">留空则不修改密码</div>
                            </div>
                            <div class="mb-3">
                                <label for="user-nickname" class="form-label">昵称</label>
                                <input type="text" class="form-control" id="user-nickname">
                            </div>
                            <div class="mb-3">
                                <label for="user-role" class="form-label">角色</label>
                                <select class="form-select" id="user-role">
                                    <option value="USER">普通用户</option>
                                    <option value="ADMIN">管理员</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="user-status" class="form-label">状态</label>
                                <select class="form-select" id="user-status">
                                    <option value="1">启用</option>
                                    <option value="0">禁用</option>
                                </select>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="save-user-btn">保存</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 云账号编辑模态框 -->
        <div class="modal fade" id="accountModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="accountModalTitle">云账号信息</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form id="account-form">
                            <input type="hidden" id="account-id">
                            <div class="mb-3">
                                <label for="account-name" class="form-label">名称</label>
                                <input type="text" class="form-control" id="account-name" required>
                            </div>
                            <div class="mb-3">
                                <label for="account-provider" class="form-label">提供商</label>
                                <select class="form-select" id="account-provider" required>
                                    <option value="">请选择</option>
                                    <option value="ALIYUN">阿里云</option>
                                    <option value="TENCENT">腾讯云</option>
                                    <option value="AWS">亚马逊AWS</option>
                                    <option value="AZURE">微软Azure</option>
                                    <option value="GOOGLE">谷歌云</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="account-region" class="form-label">区域</label>
                                <input type="text" class="form-control" id="account-region">
                            </div>
                            <div class="mb-3">
                                <label for="account-access-key" class="form-label">Access Key</label>
                                <input type="text" class="form-control" id="account-access-key" required>
                            </div>
                            <div class="mb-3">
                                <label for="account-secret-key" class="form-label">Secret Key</label>
                                <input type="password" class="form-control" id="account-secret-key" required>
                            </div>
                            <div class="mb-3">
                                <label for="account-bucket" class="form-label">存储桶</label>
                                <input type="text" class="form-control" id="account-bucket">
                            </div>
                            <div class="mb-3">
                                <label for="account-endpoint" class="form-label">Endpoint</label>
                                <input type="text" class="form-control" id="account-endpoint">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="save-account-btn">保存</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 提示框 -->
        <div class="toast-container position-fixed bottom-0 end-0 p-3">
            <div id="toast" class="toast" role="alert">
                <div class="toast-header">
                    <strong class="me-auto">提示</strong>
                    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
                </div>
                <div class="toast-body" id="toast-message">
                    <!-- 消息内容 -->
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/admin.js"></script>
</body>
</html>